<!DOCTYPE html>
<html lang="zh-cn">
<head>
    <meta charset="UTF-8">
    <title>五子棋</title>
    <script src="./jquery.min.js"></script>
</head>
<style>
    *{
        margin:0;
        list-style: none;
        padding: 0;
    }
    #canvas{
        background:url("./img/bang7.jpg");/*图片背景*/
    }

    .wrap{
        display: none;
        height:100px;
        width: 200px;
        border:1px solid;
        position: absolute;
        top:150px;
        text-align: center;
        background-color: #99cd78;
        color: #ebffe8;
    }
    .wrap ul{
        position: absolute;
        bottom: 10px;
        width: 100%;
    }
    .wrap li{
        display: inline-block;
        width: 80px;
        background-color: #4a7577;
        color: #dddddd;
        height:25px;
        line-height: 25px;
        text-align: center;
        cursor: pointer;
    }

    .wrap span{
        display: inline-block;
        margin-top:15px;
    }

    .show_msg{
        height:35px;
        width: 120px;
        text-align: center;
        line-height: 35px;
        /*border:1px solid;*/
        background-color: #41414152;
        border-radius: 2px;
        position: absolute;
        top:300px;
        color: #fff;
        display: none;
    }
</style>
<body onload="init()">
<div onclick="playBegin()" style="height:30px;width: 50px;text-align: center;line-height: 30px;color:#fff;background-color: #99cd78;cursor:pointer;
">
    开始
</div>
<div class="wrap">
    <div>
        <span>over</span>
        <ul>
            <li onclick="hideShadow()">确定</li>
            <li onclick="beginAgain()">重新开始</li>
        </ul>
    </div>
</div>
<div style="width: 620px;margin: 10px auto">
    <canvas onclick="playGame(event)" id="canvas" height="620" width="620">
        浏览器不支持
    </canvas>
</div>

<div class="show_msg">
    <ul>
        不能再此位置下
    </ul>
</div>
<!--<audio id="down" src="http://img-cdn2.515ppt.com/sound/00/28/66/55/286655_3ec69a25180d1f92fa2ba3a05fe0bf6e.mp3"></audio>-->
</body>
</html>

<script>
    // $.ajax({
    //     url:"http://192.168.0.122:8088/addUser",
    //     dataType:"json",
    //     method:"post",
    //     data:{
    //         userName:"毛毛33",
    //         password:"23451",
    //         email:"1309@qq.com"
    //     }
    // });

    var ws = new WebSocket();
//http://img-cdn2.515ppt.com/sound/00/28/66/55/286655_3ec69a25180d1f92fa2ba3a05fe0bf6e.mp3
    var myCanvas = document.getElementById("canvas");
    var txt = myCanvas.getContext('2d');
    var whiteGo = true;//初始化白棋先下
    var isWin = false;//初始化 游戏胜利
    var check = [];//初始化 判断位置有没有被走过 存储走过的位置
    // var black = new Image();//初始化图片
    // var white = new Image();
    // black.src = "./img/black.png";//黑棋
    // white.src = "./img/white.png";//白棋
    var winWidth = document.body.clientWidth || document.documentElement.clientWidth;
    window.onresize = function(){//实时监听浏览器窗口变化
        winWidth = document.body.clientWidth || document.documentElement.clientWidth;
    };

    function playBegin() {
        //img.tukuppt.com/newpreview_music/09/02/87/5c8a75d70c9d471406.mp3
        var music=new Audio();
        music.src="http://img.tukuppt.com/newpreview_music/09/02/87/5c8a75d70c9d471406.mp3";//
        music.loop=true;
        music.play();
    }

    function beginAgain() {//重新开始
        $(".wrap").hide(200);
        txt.clearRect(0,0,myCanvas.width,myCanvas.height);//清空画布
        isWin = false;
        whiteGo = true;
        init();
    }
    function hideShadow() {//查看战局  确定
        $(".wrap").hide(200);
    }


    function init() {//初始化画布  建立15*15 的方格
        txt.strokeStyle="#fff";
        for(var i = 0; i < 15; i ++){
            for(var j = 0; j < 15; j ++){
                txt.strokeRect(j*40+10,i*40+10,40,40)
            }
        }

        for (var x = 0; x <= 15; x++) {//矩阵初始化  存储走过的位置  包括 0 和 15
            check[x] = [];
            for (var y = 0; y <= 15; y++) {
                check[x][y] = 0;
            }
        }

    }

    function playGame(e){   //开始  下棋

        if(isWin){
            $(".wrap").show(200);
            return;
        }

        var xClient = (e.clientX-((winWidth-myCanvas.width)/2)) / 40;
        if(winWidth<myCanvas.width){
            xClient = e.clientX/40;
        }
        var x = (xClient).toFixed(0);//计算鼠标点击位置  四舍五入 取整数
        var y = ((e.clientY-50  ) / 40).toFixed(0);

        if(check[x][y]!==0){
            $(".show_msg").fadeIn();
            $(".show_msg").css("left",winWidth/2-60+"px");
            clearInterval(timmer);
            var timmer = setTimeout(function () {
                $(".show_msg").fadeOut();
            },1500);
            // alert("不能在此位置下");
            return;
        }

        var music=new Audio();
        music.src="http://img-cdn2.515ppt.com/sound/00/28/66/55/286655_3ec69a25180d1f92fa2ba3a05fe0bf6e.mp3";//
        // music.loop=true;
        music.play();

        drawImg(x,y);

    }

    function drawImg(x,y) {//绘棋
        // console.log(x,y)
        var num;
        if(x>=0 && x<=15 && y>=0 && y<=15){//判断鼠标在区域内点击
            if(whiteGo){//白棋走
                // txt.drawImage(white,x * 40 + 30,y * 40 + 30,20,20);//加白棋图片
                //绘制白棋
                txt.beginPath();
                txt.fillStyle = "white";//填充白色
                txt.arc(x*40+10,y*40+10,10,0,Math.PI*2,false);
                txt.fill();
                whiteGo = false;
                check[x][y] = 1;
                num = 1;
            }else{
                //img,0,0,100,90,50,10,100,90
                // txt.arc(x*40+20,y*40+20,20,0,Math.PI*2,false)
                // txt.drawImage(black,x * 40 + 30,y * 40 + 30,20,20);//加黑棋图片
                //绘制黑棋
                txt.beginPath();
                txt.fillStyle = "black";//填充黑色
                txt.arc(x*40+10,y*40+10,10,0,Math.PI*2,false);
                txt.stroke();
                txt.fill();
                check[x][y] = 2;
                whiteGo = true;
                num = 2;
            }
        }
        isGameOver(num,x,y);
    }
//00 10 20 30 40 50 60横
//01 11 21 31 41 51 61
//02 12 22 32 42 52 62
//03 13 23 33 43 53 63
//04 14 24 34 44 54 64
//00 01 02 03纵

    function isGameOver(checkNum,x,y) {//判断游戏结束
        var r1 = 0;
        var r2 = 0;
        var r3 = 0;
        var r4 = 0;
        var x = parseInt(x);
        var y = parseInt(y);

        //x,y
        //x,y  x,y-1,y+1,y-2,y+2,y-3,y+3
//y 5  4 3 2 1 0
        //竖直方向  递减
        for(var i = y; i >= 0; i --){
            // console.log(y,i);
            // console.log(checkNum,check[x][i]);
            if(checkNum!==check[x][i]){
                break;
            }else{
                r1 ++;
            }
        }
        //5 5 4 3
        //y 5 5 6 7 8 9 10 11 12 13 14
        //y 15 15
        //竖直方向  递增
        for(var i = y+1; i < check.length; i ++){
            if(checkNum!==check[x][i]){
                break;
            }else{
                r1 ++;
            }
        }
        //水平方向  递减
        //x 5  y 0
        for(var i = x; i >= 0; i --){
            // console.log(checkNum,check[i][y]);
            if(checkNum!==check[i][y]){
                break;
            }else{
                r2 ++;
            }
        }
        //5  6 7 8 9
        //水平方向  递增
        for(var i = x+1; i < check.length; i ++){
            if(checkNum!==check[i][y]){
                break;
            }else{
                r2 ++;
            }
        }

        //交叉方向  左上右下
        //x,y  5,4  5,4  4,3  3,2  2,1  1,0

        for(var i = x, j = y; i >= 0 & j >= 0; i --, j --){
            if(checkNum!==check[i][j]){
                break;
            }else{
                r3++;
            }
        }
//x,y  5,4   6,5  7,6  8,7  9,8 ...
        for(var i = x+1, j = y+1; i < check.length & j < 15; i ++, j ++){
            if(checkNum!==check[i][j]){
                break;
            }else{
                r3++;
            }
        }
//
//        交叉  左下右上
//x,y  5,4  5，4  6,3  7,2  8,1  9,0  x 15
        for(var i = x,j = y; i < check.length & j >= 0; i ++, j--){
            if(checkNum!==check[i][j]){
                break;
            }else{
                r4++;
            }
        }

        //x,y  5,4  4,5  3,6  2,7  1,8  0,9
        for(var i = x-1,j = y+1; i >= 0 & j < check.length; i --, j ++){
            if(checkNum!==check[i][j]){
                break;
            }else{
                r4++;
            }
        }


        if(r1>=5 || r2>=5 || r3>=5 || r4>=5){
            var color = "白棋";
            if(checkNum==2){
                color = "黑棋"
            }
            // alert(color+"胜利");
            $(".wrap").css("left",winWidth/2-100+"px");//左右居中展示
            $(".wrap span").text(color+"获胜");
            $(".wrap").show(200);
            isWin = true;
        }

    }

//斜左上  斜左下   坐上右下，，

</script>
